<template>
<!--  背景图-->
  <div class="main-page">
    <!-- 搜索框 -->
    <div class="search-box">
      <input type="text" v-model="searchQuery" placeholder="搜索商品">
      <button @click="search">搜索</button>
      <!--    登录框 在顶部最右侧-->
    </div>
    <div class="showImg" @mouseenter="stopCarousel" @mouseleave="startCarousel">
      <img  @mouseover="changeInterval(true)"
            @mouseleave="changeInterval(false)"
            v-for="(item) in sourceList"
            :key="item.sourceId"
            :src="item.sourceUrl"
            alt="暂无图片"
            v-show="item.sourceId===currentIndex"
      >
      <div  @click="clickIcon('up')"   class="iconDiv icon-left">
        <i class="el-icon-caret-left"></i>
      </div>
      <div  @click="clickIcon('down')"  class="iconDiv icon-right">
        <i class="el-icon-caret-right"></i>
      </div>
      <div class="banner-circle">
        <ul>
          <li @click="changeImg(item.sourceId)"
              v-for="(item) in sourceList"
              :key="item.sourceId"
              :class="item.sourceId===currentIndex? 'active': '' "
          ></li>
        </ul>
      </div>
    </div>


    <!-- 商品列表 -->
    <div class="product-list">
      <div v-for="(product, index) in products" :key="index" class="product-item">
        <div @click="toDetailPage(product)">
          <el-image style="width: 250px; height: 350px;"
              :src="product.bookInfo.imgUrl" alt="暂无图片"/>
          <div class="product-info">
            <h3>{{ product.bookInfo.title }}</h3>
            <p>{{ product.bookInfo.author }}</p>
            <span>价格：{{ product.goodInfo.price }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import TopLine from "@/components/TopLine";

export default {
  components: {TopLine},
  props: {
    isLogin: Boolean,
    userInfo: Object
  },
  data() {
    return {
      isLogin: false,
      userInfo: {},
      searchQuery: '',
      products: [],
      goodsInfo:[],
      currentIndex: 1,//当前所在图片下标
      timer:null,//定时轮询
      sourceList: []
    };
  },
  methods: {
    search() {
      // todo 实现搜索功能
      console.log('搜索:', this.searchQuery);
    },
    stopCarousel(){
      clearInterval(this.timer)
    },
    startCarousel(){
      this.startInterval()
    },
    startInterval(){
      // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
      clearInterval(this.timer);
      this.timer = setInterval(()=>{
        this.currentIndex++;
        if(this.currentIndex > this.sourceList.length){
          this.currentIndex = 1
        }
      },3000)
    },
    // 点击左右箭头
    clickIcon(val){
      if(val==='down'){
        this.currentIndex++;
        if(this.currentIndex > this.sourceList.length){
          this.currentIndex = 1;
        }
      }else{
        if(this.currentIndex === 1){
          this.currentIndex = this.sourceList.length+1;
        }
        this.currentIndex--;
      }
    },
    // 点击控制圆点
    changeImg(index){
      this.currentIndex = index
    },
    //鼠标移入移出控制
    changeInterval(val){
      if(val){
        clearInterval(this.timer)
      }else{
        this.startInterval()
      }
    },
    toDetailPage(goodInfo){
      sessionStorage.setItem('goodInfo',JSON.stringify(goodInfo))
      window.open('/#/detail')
    },
    getGoodsInfo(){
      axios({
        url: "/api/book/get_goods_list",
        method: "get",
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => {
        this.products = res.data.data;
      }).catch(err => {
        console.log(err);
      })
    },
    initSourceList() {
      axios({
        url: "/api/hot/get_source_list",
        method: "get",
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => {
        this.sourceList = res.data
        // this.currentIndex = this.sourceList[0].sourceId
        // console.log('sourceList',this.sourceList)
      }).catch(err => {
        console.log(err);
      })
    },
    init(){
      this.initSourceList()
      this.getGoodsInfo()
      this.startInterval()
      console.log('isLogin:', this.isLogin);
      console.log('userInfo:', this.userInfo);
    }
  },
  created() {
    this.init()
  }
};
</script>




<style scoped>
/* 样式可以根据自己的需求进行修改 */
.main-page {
  background-color: azure;
  max-width: available;
  margin: 0 auto;
  padding: 20px;
  text-align: center; /* 1.所有元素左右居中 */
}
.search-box input[type="text"] {
  padding: 10px;
  border: 2px solid orange; /* 边缘线颜色 */
  border-radius: 20px; /* 圆角 */
  width: 700px; /* 宽度 */
  margin: 50px 20px 0 0; /* 搜索框和按钮间隔 */
}

.search-box button {
  padding: 10px 20px;
  background-color: orange; /* 按钮背景颜色 */
  color: white;
  border: 2px solid orange; /* 边缘线颜色 */
  border-radius: 20px; /* 圆角 */
  cursor: pointer;
}

.search-box button:hover {
  background-color: #ff8c00; /* 鼠标悬停时的背景颜色 */
}


.carousel img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

.product-list {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

.product-list div {
  cursor: pointer;
}

.product-item {
  background-color: bisque;
  width: 400px;
  height: 500px;
  margin-right: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.product-item img {
  margin-bottom: 10px;
}

.product-info {
  margin-top: 30px;
  height: 15%;
}
.product-info h3 {
  margin: 0 0 5px;
}

.product-info p {
  margin: 0 0 10px;
}

.product-info span {
  font-weight: bold;
}

/* 清除li前面的圆点 */
li {
  list-style-type: none;
}
.showImg{
  position: relative;
  width: 60%;
  height: 350px;
  margin: 100px auto;
  overflow: hidden;
}
/* 轮播图片 */
.showImg img{
  width: 100%;
  height: 100%;
}

/* 箭头图标 */
.iconDiv{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 1px solid #666;
  border-radius: 15px;
  background-color: rgba(125,125,125,.2);
  line-height: 30px;
  text-align: center;
  font-size: 25px;
  cursor: pointer;
}
.iconDiv:hover{
  background-color: red;
}
.icon-left{
  left: 10px;
}
.icon-right{
  right: 10px;
}

/* 控制圆点 */
.banner-circle{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20px;
}
.banner-circle ul{
  margin: 0 50px;
  height: 100%;
  text-align: right;
}
.banner-circle ul li{
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 5px;
  border-radius: 7px;
  background-color: rgba(125,125,125,.8);
  cursor: pointer;
}
.active{
  background-color: black !important;
}

</style>
